<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <!--这里引入页面的样式-->
    <style>
        .product-detail {
            padding: 20px;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .demonstration{
            font-size: 24px;
            text-align: center;
            color:crimson;
            border: 1px solid #ccc;
        }
        .product-info {
            padding: 20px;
            text-align: center;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            border-radius: 20px;
            background-color:honeydew;
            margin-left: 30px;
            margin-top: 30px;
            height: 350px;
        }
        .price{
            color: red;
        }
        .name{
            color: #666666;
        }
        .product-details {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin-top: -66px;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 1px solid #ccc;
            padding: 20px;
            height: 350px;
        }

        .price-info ,
        .delivery-info ,
        .quantity-section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }

        .price-info ,
        .delivery-info ,
        .quantity-section {
            width: 100%;
            justify-content: center;
        }




        .name {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .addr {
            text-align: center;
        }

        .pricename{
            margin-right: -5px;
        }
        .image-container {
            height:100%;
            width: 200%;
            overflow: hidden;
        }

        #showimg img{
            width: 610px;
            height: 400px;
            border: red solid 1px;
        }
        .product-details {
            display: flex;
            flex-direction: column;
            align-items: center;
        }



    </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
    <el-page-header @back="goBack" content="24°超市">
    </el-page-header>
    <div class="product-detail">
        <el-row>
            <el-col :span="12">
                <div class="block">
                    <span class="demonstration">24°超市，让购物更简单！</span>
                    <el-carousel height="400px">
                        <el-carousel-item v-for="(item, index) in images" :key="index">
                            <div class="image-container" id="showimg">
                                <img :src="item" alt="Image">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="product-details">
                    <div class="product-info">
                        <h2 class="name">{{a.commodityName}}</h2>
                        <div class="price-info" style="margin-top: 15px">
                            <span class="pricename">商品价格：</span>
                            <span class="price">￥{{a.price}}</span>
                        </div>
                        <div class="delivery-info" style="margin-top: 15px">
                            <div class="addr">
                                <span>配送地点：</span>
                                <span>{{b.userAddr}}</span>
                            </div>
                        </div>
                        <div class="quantity-section" style="justify-content: center; margin-top: 15px;">
                            <div>
                                <span>商品数量：</span>
                                <el-input-number v-model="quantity" :min="1" :max="99" @change="handleQuantityChange"></el-input-number>
                            </div>
                        </div>
                        <div class="quantity-section" style="justify-content: center; margin-top: 15px;">
                            <el-button type="danger" @click="addToCart">加入购物车</el-button>
                        </div>
                    </div>

                </div>
            </el-col>
        </el-row>
    </div>
</div>


<script>
    let global;
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    const uname=urlParams.get('userName');
    const uid=urlParams.get('userId');
    //console.log(uid+"++++++");
    // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
    // 创建 Vue 实例
    new Vue({
        el: '#app',
        data() {
            return {
                images:[],
                quantity:1,
                a:{},
                b:[]
            };
        },
        methods: {
            goBack() {
                console.log('go back');
                history.go(-1); // 返回上一个页面
            },
            showGoodsInfo() {

                /*console.log(this.quantity+"+++++++++++++++++++");*/
               /* console.log(id+"++++++++++++++");*/
                axios.get("../users?op=Goodsfindbyid&commodityId=" + id).then(response=>{
                    const data3 = response.data.data;
                    //console.log(data3[0].price+"9999999999")
                    this.a = data3[0];
                    this.handlePics();
                });
                    axios.get("../users?op=UsersInfoByName&userName=" + uname).then(response=>{
                        const data4 = response.data.data;
                       // console.log(data4[0].userAddr+"9999999999")
                        this.b = data4[0];
                    })
            },
            addToCart(){
                if(global==undefined){
                    global=1;
                }
                console.log(global);
                axios.get('../users?op=ShoppingCardQ&productId='+id+'&userId='+uid+'&quantity='+global)
                    .then(Response=>{
                        console.log(Response);
                        if(Response.data>0){
                            alert("添加购物车成功！！！");
                        }else {
                            alert("添加失败！！！");
                        }
                    })
            },
            handleQuantityChange(value) {
                // 在这里处理所选值的变化
                /*console.log('所选值:', value);*/
                global=value;
            },
            handlePics(){
               this.images = this.a.commodityPic.split(';');
               console.log(this.a+"(((((((((((((((((((((((((");
            }
        },
        mounted(){
            this.showGoodsInfo();
        }
    });
</script>
</body>
</html>